<template>
    <transition name="goTop">
        <button v-show="ShowHidden" class="goTop" @click="goTop">
            <i class="iconfont icon-jiantoushang"></i>
        </button>
    </transition>
</template>
<script>
    export default {
        data() {
            return {
                ShowHidden: false,
                scroll: ''
            }
        },
        methods: {
            //回到头部
            goTop() {
                document.body.scrollTop = 0
                document.documentElement.scrollTop = 0
            },
            //计算距离头部的距离 
            menu() {
                this.scroll = document.documentElement.scrollTop || document.body.scrollTop;
                if (this.scroll > 250) {
                    this.ShowHidden = true;
                } else {
                    this.ShowHidden = false;
                }
            }

        },
        created() {

        },
        mounted() {
            window.addEventListener('scroll', this.menu)
        }
    }

</script>
<style lang="less">
    .goTop {
        width: 40px;
        height: 40px;
        background: #4285f4;
        border: 0;
        color: #ffffff;
        position: fixed;
        bottom: 100px;
        right: 100px;
        z-index: 99999;
        border-radius: 3px;
        cursor: pointer;
    }

    .goTop-enter-active,
    .goTop-leave-active {
        transition: all .5s;
    }

    .goTop-enter,
    .goTop-leave-to {
        transform: translateY(-30%);
        opacity: 0;
    }

</style>
